<script setup>
/**
 * @/views/home/components/VideoCard.vue
 * 海报卡片组件
 */

/* 引入 */
import { ref, watch } from "vue";
import { useTownStore } from "@/stores/index.js";

/* 数据 */
const townStore = useTownStore();
const siderpiclist = ref([]);
const display = ref(false);

/* 侦听 */
watch(
  // 指定侦听的目标
  () => townStore.currentTown,
  // 发生改变时回调
  (newTown) => {
    if (newTown && newTown.siderpiclist) {
      siderpiclist.value = newTown.siderpiclist;
      display.value = true;
    }
  },
  { immediate: true }, // 这里的 immediate: true 确保在初次加载时也能触发
);

/* 导入 */
</script>

<template>
  <div v-if="false" class="video-card">
    <el-card style="width: 20vw; height: 50%">
      <template #header>
        <p>小镇海报</p>
      </template>
      <el-carousel v-if="display" :interval="4000" type="card">
        <el-carousel-item v-for="(item, index) in siderpiclist" :key="index">
          <!-- 显示图片 -->
          <img
            :src="item"
            alt="Town Image"
            style="width: 100%; height: 30%; object-fit: cover"
          />
        </el-carousel-item>
      </el-carousel>
    </el-card>
  </div>
</template>

<style scoped>
/* 调整视频宽度为铺满整个卡片 */
.video-player {
  width: 100%;
}
</style>
